<template>
  <div id="app">
    <Loading ref="loadingBar"></Loading>
    <router-view/>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import About from "./views/About.vue";
import Loading from "./components/Loading.vue";

@Component({
  components: {
    Loading: Loading
  }
})
export default class AppRoot extends Vue {
  public mounted() {
    this.$loadingBar = this.$refs.loadingBar as Loading;
    this.$root.$loadingBar = this.$loadingBar;
  }
}
</script>
<style scoped lang='scss'>
.progress {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 2px;
  width: 0%;
  transition: width 0.2s, opacity 0.4s;
  opacity: 1;
  background-color: #efc14e;
  z-index: 999999;
}
</style>
